<template>
  <div class="u-bread">
    <a-breadcrumb separator=">">
      <a-breadcrumb-item>
        <a-icon type="home" theme="filled" />
        <span>{{ first }}</span>
      </a-breadcrumb-item>
      <a-breadcrumb-item v-for="item in forList" :key="item">
        <span>{{ item }}</span>
      </a-breadcrumb-item>
      <a-breadcrumb-item> {{ last }} </a-breadcrumb-item>
    </a-breadcrumb>
  </div>
</template>

<script>
export default {
  props: {
    breadList: {
      type: Array,
      required: false,
      default: () => ["一级", "二级标题", "当前页面标题"],
    },
  },
  data() {
    return {
      first: this.breadList[0],
      last: this.breadList[this.breadList.length - 1],
      forList: this.breadList.slice(1, this.breadList.length - 1),
    };
  },
};
</script>

<style></style>
